<template>
<div  class="center" style="margin-top: 30px;margin-bottom: 150px">
    <el-row :gutter="20">
        <!--左侧侧栏-->
        <el-col :span="4">
            <el-card style="height: 500px">
                <el-menu
                    class="el-menu-vertical-demo">
                    <el-menu-item class="side_info" index="1" @click="gotoInfo()"><i class="el-icon-menu"></i><span>个人资料</span></el-menu-item>
                    <el-menu-item class="side_info" index="2" @click="gotoCredential()"><i class="el-icon-menu"></i><span>执业证书</span></el-menu-item>
                </el-menu>
            </el-card>
        </el-col>

        <!--右侧主体-->
        <el-col :span="20" >
            <router-view/>
        </el-col>
    </el-row>
</div>
</template>
<script>
export default {
    data(){
        return {

        }
    },
    methods: {

        gotoInfo() {
            if (this.$route.path!=='/personal/doc/info') {
                this.$router.push('/personal/doc/info');
            }
        },
        gotoCredential() {
            if (this.$route.path!=='/personal/doc/credential') {
                this.$router.push('/personal/doc/credential');
            }
        }
    },
    created() {
    },
    mounted() {

    }
}
</script>
<style>
body{
    background-color: rgb(241,242,243);
}
.center{
    margin:0 auto;
    width:1200px
}
.side_info:hover{
    background-color: #e5f6e1;
}
.side_info:focus{
    color: #69bb55;
    background-color: #e5f6e1;
}
.side_info.is-active {
    color: #69bb55;
}
</style>